<template>

	<view class="animated fadeIn slow">
		<view class="pic">
			<image :src="pic" style="width: 100%;" mode="widthFix" />
		</view>
		<!--标题栏目-->	
		<swiper-tab-head
			:tabBars="tabBars" 
			:tabIndex="tabIndex"
			@tabtap="tabtap"
			scrollItemStyle="width:25%"
			scrollStyle="border-bottom:0;">
		</swiper-tab-head>	
		<block v-if="tabIndex==0">
			<play-list v-if="hotList.length>1"
			 :aid="0" :playListId="0" :privileges="hotList" ></play-list>
			
		</block>
		<block v-if="tabIndex==1">
			<custom-search-list v-if="album.length>1" :list="album" :album="true" ></custom-search-list>
			
		</block>
		<!--MV-->
		<block v-if="tabIndex==2">
			<songer-mv v-if="mv.length>1" :mv="mv"></songer-mv>
			
		</block>
		<block v-if="tabIndex==3">
			<songerJieshao v-if="songerdesc.introduction||songerdesc.briefDesc" :songerdesc="songerdesc"></songerJieshao>
			
		</block>
	</view>
	
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head/swiper-tab-head.vue';
	import playList from '../../components/playlist/play-list/play-list.vue';
	import customSearchList from '../../components/search/custom-search-list/custom-search-list.vue';
	import songerMv from '../../components/songer/songer-mv/songer-mv.vue';
	import songerJieshao from '../../components/songer/songer-jieshao/songer-jieshao.vue';
 	export default {
		components:{
			swiperTabHead,
			playList,
			customSearchList,
			songerMv,
			songerJieshao
		},
		data() {
			return {
				isshow:true,
				tabIndex:0,
				tabBars:[
					{ name:"热门",id:"hot" },
					{ name:"专辑",id:"album" },
					{ name:"MV",id:"MV" },
					{ name:"歌手信息",id:"info" },
				],
				songerId:0,
				pic:'',
				hotList:[],
				album:[],
				mv:[],
				songerdesc:{},
				istap:[true,false,false,false]
			}
		},
		onLoad(options) {
			let songerId=options.id;
			this.songerId=songerId;
			this.getmusic();
		},
		methods: {
			tabtap(index){
				this.tabIndex=index;
				this.istap[index]=true;
				switch(index) {
					case 0:
						if(this.istap[index]){
							this.getmusic();
						}
					break;
					case 1:
						if(this.istap[index]){
							this.getSongerAlbum();
						}
					break;
					case 2:
						if(this.istap[index]){
							this.getSongerMv();
						}
					break;
					case 3:
						if(this.istap[index]){
							this.getSongerInfo();
						}
					break;
				}
			},
			//歌手封面以及热门50首
			async getmusic(){
			    let id=this.songerId;
			    const songerMusic=await this.request({url: this.bsurl+'artists?id='+id});
			    let hotList=songerMusic.hotSongs.map(v=>{
			      return{
			        name:v.name,
			        author:v.ar[0].name,
			        id:v.id,
			        album:v.al.name,
			      }
			    })
			    this.pic=songerMusic.artist.img1v1Url+'?param=400y370',
			    this.hotList=hotList;
			    uni.setNavigationBarTitle({
				   title: songerMusic.artist.name 
			    })
			},
			//歌手专辑
			async getSongerAlbum(){
			    let id=this.songerId;
			    const albumInfo=await this.request({url: this.bsurl+'artist/album?limit=50&id='+id});
			    let hotAlbums=albumInfo.hotAlbums.map(v=>{
			      return{
			        id:v.id,
			        pic:v.blurPicUrl+'?param=100y100',
			        name:v.name,
			        author:v.artist.name,
			        signature:v.artist.alias[0]
			      }
			    })
			    this.album=hotAlbums
			},
			//歌手mv
			async getSongerMv(){
			    let id=this.songerId;
			    const mvInfo=await this.request({url: this.bsurl+'artist/mv?id='+id});
			    let mv=mvInfo.mvs.map(v=>{
			      return{
			        id:v.id,
			        pic:v.imgurl+'?param=200y100',
			        name:v.name,
			        author:v.artistName,
			        playCount:v.playCount
			      }
			    })
			    this.mv=mv
			},
			//歌手详情
			async getSongerInfo(){
			    let id=this.songerId;
			    const songerInfo=await this.request({url: this.bsurl+'artist/desc?id='+id});
			    this.songerdesc={
					briefDesc:songerInfo.briefDesc,
					introduction:songerInfo.introduction
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.pic{
		width: 100%;
	}

	.noth{
		color: #CCCCCC;
		padding: 10upx;
		font-weight: bold;
	}
</style>
